{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'customer.css' | asset_url | stylesheet_tag }}
<div class="content-banner">
  <div class="bg-image">
  <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
  {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
>
  {%- if section.settings.image != blank -%}
    <img
      srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
        {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
        {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
        {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
        {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
        {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
        {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
      src="{{ section.settings.image | img_url: '1500x' }}"
      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
      alt="{{ section.settings.image.alt | escape }}"
      loading="lazy"
      width="{{ section.settings.image.width }}"
      height="{{ section.settings.image.height }}"
    >
  {%- else -%}
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
  {%- endif -%}
  </div>
  <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
  {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
>
  {%- if section.settings.image_mobile != blank -%}
    <img
      srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
        {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
      src="{{ section.settings.image_mobile | img_url: '1500x' }}"
      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
      alt="{{ section.settings.image_mobile.alt | escape }}"
      loading="lazy"
      width="{{ section.settings.image_mobile.width }}"
      height="{{ section.settings.image_mobile.height }}"
    >
  {%- else -%}
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
  {%- endif -%}
  </div>
</div>


  {% if section.settings.text != blank %}
    <div class="twy-text">
      <div class="page-width">
        
         <div class="point-loy">
           {% if customer %}
             <div class="text"> {{ section.settings.text_1 | escape }}  {{ customer.first_name }} </div>
             <p>{{ section.settings.text_2 | escape }}  <span data-lion-points="approved"></span> {{ section.settings.text_3 | escape }}<br>
             (<span data-lion-points="pending"></span> {{ section.settings.text_4 | escape }})
             </p>
              {%- if section.settings.button_label != blank -%}
         <div class="ten-button ">
            <a class="tenways_button-hover button button--primary"{% if section.settings.button_link_2 == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link_2 }}"{% endif %}>
          {{ section.settings.button_label_2 | escape }}
        </a> 
           </div>
        {%- endif-%}
         {% else %}
           
        <div class="text">{{ section.settings.text }}</div>
        {% if section.settings.richtext %}
          {{ section.settings.richtext }}
        {% endif %}
         {%- if section.settings.button_label != blank -%}
         <div class="ten-button ">
          <a class="tenways_button-hover button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
          {{ section.settings.button_label | escape }}
        </a> 
          {% if section.settings.button_label_1 != blank %}
          <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}" >
            <button id="ProductPopup-{{ section.id }}" class="tenways_button-hover button twy-button product-popup-modal__button link" type="button" aria-haspopup="dialog">
              {{ section.settings.button_label_1 | escape }}
            </button>
          </modal-opener>
          {% endif %}
         
           </div>
        {%- endif-%}
         {% endif %}   
         </div>
           
      </div>
    </div>
  {% endif %}



  <modal-dialog id="PopupModal-{{ section.id }}" class="product-popup-modal">
      <div role="dialog" aria-label="{{ section.settings.button_label_1 }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
        <div class="product-popup-modal__content-info">
          <div class="customer customer-right login">
            <h1 id="recover" tabindex="-1">
              {{ 'customer.recover_password.title' | t }}
            </h1>
            <div>
              <p>
                {{ 'customer.recover_password.subtext' | t }}
              </p>
      
              {%- form 'recover_customer_password' -%}
                {% assign recover_success = form.posted_successfully? %}
                <div class="field">
                  <input
                    type="email"
                    value=""
                    name="email"
                    class="field__inputs"
                    id="RecoverEmail"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                    aria-invalid="true"
                    aria-describedby="RecoverEmail-email-error"
                    autofocus
                    {% endif %}
                    placeholder="{{ 'customer.login_page.email' | t }}">
                  <label for="RecoverEmail">
                    {{ 'customer.login_page.email' | t }}
                  </label>
                </div>
                {%- if form.errors -%}
                  <small id="RecoverEmail-email-error" class="form__message">
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 13 13">
                      <circle
                        cx="6.5"
                        cy="6.50049"
                        r="5.5"
                        stroke="white"
                        stroke-width="2" />
                      <circle
                        cx="6.5"
                        cy="6.5"
                        r="5.5"
                        fill="#EB001B"
                        stroke="#EB001B"
                        stroke-width="0.7" />
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white" />
                      <path
                        d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z"
                        fill="white"
                        stroke="#EB001B"
                        stroke-width="0.7">
                    </svg>
                    {{ form.errors.messages['form'] }}
                  </small>
                {%- endif -%}
      
                <button>
                  {{ 'customer.login_page.submit' | t }}
                </button>
      
                <a href="#login" class="create_account">
                  {{ 'customer.login_page.cancel' | t }}
                </a>
              {%- endform -%}
            </div>
      
            <h1 id="login" tabindex="-1">
              {{ 'customer.login_page.title' | t }}
            </h1>
            <div>
              {%- if recover_success == true -%}
                <h3
                  class="form__message"
                  tabindex="-1"
                  autofocus>
                  <svg
                    aria-hidden="true"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 13 13">
                    <path
                      d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z"
                      fill="#428445"
                      stroke="white"
                      stroke-width="0.7" />
                    <path d="M5.53271 8.66357L9.25213 4.68197" stroke="white" />
                    <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white">
                  </svg>
                  {{ 'customer.recover_password.success' | t }}
                </h3>
              {%- endif -%}
              {%- form 'customer_login', novalidate: 'novalidate', return_to: '/pages/loyalty-program' -%}
                {%- if form.errors -%}
                  <h2
                    class="form__message"
                    tabindex="-1"
                    autofocus>
                    <span class="visually-hidden">{{ 'accessibility.error' | t }}
                    </span>
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 13 13">
                      <circle
                        cx="6.5"
                        cy="6.50049"
                        r="5.5"
                        stroke="white"
                        stroke-width="2" />
                      <circle
                        cx="6.5"
                        cy="6.5"
                        r="5.5"
                        fill="#EB001B"
                        stroke="#EB001B"
                        stroke-width="0.7" />
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white" />
                      <path
                        d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z"
                        fill="white"
                        stroke="#EB001B"
                        stroke-width="0.7">
                    </svg>
                    {{ 'templates.contact.form.error_heading' | t }}
                  </h2>
                  {{ form.errors | default_errors }}
                {%- endif -%}
      
                <div class="field">
                  <input
                    type="email"
                    name="customer[email]"
                    id="CustomerEmail"
                    autocomplete="email"
                    class="field__inputs"
                    autocorrect="off"
                    autocapitalize="off"
                    {% if form.errors contains 'form' %}
                    aria-invalid="true"
                    {% endif %}
                    placeholder="{{ 'customer.login_page.email' | t }}">
                  <label for="CustomerEmail">
                    {{ 'customer.login_page.email' | t }}
                  </label>
                </div>
      
                {%- if form.password_needed -%}
                  <div class="field">
                    <input
                      type="password"
                      value=""
                      name="customer[password]"
                      id="CustomerPassword"
                      class="field__inputs"
                      autocomplete="current-password"
                      {% if form.errors contains 'form' %}
                      aria-invalid="true"
                      {% endif %}
                      placeholder="{{ 'customer.login_page.password' | t }}">
                    <label for="CustomerPassword">
                      {{ 'customer.login_page.password' | t }}
                    </label>
                  </div>
      
                  <a href="#recover">
                    {{ 'customer.login_page.forgot_password' | t }}
                  </a>
                {%- endif -%}
      
                <button>
                  {{ 'customer.login_page.title' | t }}
                </button>
      
              {%- endform -%}
            </div>
      
            {%- if shop.checkout.guest_login -%}
              <div>
                <hr>
                <h2>{{ 'customer.login_page.guest_title' | t }}</h2>
      
                {%- form 'guest_login' -%}
                  <button>
                    {{ 'customer.login_page.guest_continue' | t }}
                  </button>
                {%- endform -%}
              </div>
            {%- endif -%}
          </div>
        </div>
        <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'twy-icon-close' %}</button>
      </div>
 </modal-dialog> 






  <div class="twy-content">
    <div class="page-width">
      <ul class="grid grid--3-col-tablet">
        {%- for block in section.blocks -%}
          <li class="multicolumn-list__item">
            <div class="tenways_page-list">
              {%- if block.settings.html != blank -%}
                <div class="text">{{ block.settings.html }}</div>
              {%- endif -%}

              {%- if block.settings.text != blank -%}
                <div class="richtext">{{ block.settings.text }}</div>
              {%- endif -%}

              {%- if block.settings.button_label != blank -%}
                <a
                  {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}"{% endif %}
                  class="tenways_button-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
                  {% if block.settings.button_link == blank %}
                  aria-disabled="true"
                  {% endif %}
                  {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
            </div>

            <div class="twy-buttom">
              {%- if block.settings.title != blank -%}
                <div class="twy_title">{{ block.settings.title }}</div>
              {%- endif -%}
              {%- if block.settings.note != blank -%}
                <div class="note">{{ block.settings.note }}</div>
              {%- endif -%}
            </div>

          </li>
        {%- endfor -%}
      </ul>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Banner reward",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width banner-content tenways_margin-content banner-reword",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.image-banner.settings.image.label"
      }, {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      },
      {
        "type": "text",
        "id": "text_1",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "text_2",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "text_3",
        "label": "Text 3"
      },
      {
        "type": "text",
        "id": "text_4",
        "label": "Text 4"
      },
      {
        "type": "text",
        "id": "text",
        "label": "Text"
      }, {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      },
      {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
      {
      "type": "text",
      "id": "button_label_1",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link_1",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
      {
      "type": "text",
      "id": "button_label_2",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link_2",
      "label": "button_link 2"
    }
    ],
    "blocks": [
      {
        "type": "about",
        "name": "about",
        "settings": [
          {
            "type": "html",
            "id": "html",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "info": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }, {
            "type": "text",
            "id": "title",
            "label": "Title"
          }, {
            "type": "text",
            "id": "note",
            "label": "note"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Banner reward"
      }
    ]
  }
{% endschema %}